<template>
  <div class="page">
    <div class="block">
      <h2>一、支持的埋点事件</h2>
      <div>绑定埋点事件时，右侧的值均为 elementName</div>
      <div>
        <div>
          <h3>1. 监听元素点击：</h3>
          <div>&lt;div data-track-click="submit-event">提交&lt;/div></div>
          <h3>2. 监听区域访问：</h3>
          <div>&lt;div data-track-areavisit="submit-form">&lt;/div></div>
          <h3>3. 监听元素曝光：</h3>
          <div>&lt;div data-track-elementview="product-card">&lt;/div></div>
        </div>
      </div>
    </div>
    <div class="block">
      <h2>二、获取指定元素的值</h2>
      <div>
        <div>
          设置 data-track-params 属性指定上报数据，与 h5 格式相同，不支持选择器
        </div>
        <div
          class="button"
          data-track-click="submit-event"
          data-track-params="pageName: 覆盖初始化时的 pageName 参数"
          @click="() => {}"
        >
          提交
        </div>
      </div>
    </div>
    <div class="block">
      <h2>三、设置计数器</h2>
      <div>一些埋点有计数器需求，比如按钮点击了几次、区域曝光了几次，数据放在 ext_params 中</div>
      <div>
        <div class="button" data-track-elementview="counter-btn" data-track-click="counter-btn" @click="() => {}">
          计数器示例按钮
        </div>
      </div>
    </div>
    <div class="block">
      <h2>四、使用自定义函数获取埋点数据</h2>
      <pre>
new Tracker({
  customFnMap: {
    getProductInfo() {
      return {
        productName: '测试商品信息',
        timestamp: Date.now()
      }
    }
  }
})</pre
      >
      <div>
        <div class="button" data-track-click="tap-product" data-track-fn="getProductInfo" @click="() => {}">
          调用 getProductInfo() 方法获取埋点数据
        </div>
      </div>
    </div>
    <div class="block">
      <h2>五、监听区域访问</h2>
      <div>点击区域记录一次，点击区域外记录一次</div>
      <pre>data-track-areavisit="formentry,formleave"</pre>

      <div style="background: red; height: 1rem" data-track-areavisit="formentry,formleave">
        <div>
          <span>联系电话</span>
          <input type="text" value="13999999999" id="areavisit-input" />
        </div>
        <div class="button" data-track-click="submit-event-2" data-track-params="username: #areavisit-input">提交</div>
      </div>
    </div>
    <div class="block">
      <h2>六、监听元素曝光</h2>
      <pre>data-track-elementview="product-card"</pre>
      <div data-track-elementview="product-card" style="height: 1rem; background: red">假装自己是一个卡片</div>
    </div>
  </div>
</template>

<script>
/**
 * 与 h5 的区别
 * 1. 监听元素点击，必须绑定 @click 事件，可以传一个空方法
 * 2. 不支持在 data-track-params 中以选择器形式获取其他元素的值
 */

// import SelectorQuery from '@/services/common/SelectorQuery'
import {Tracker} from '@/services/bussiness/track/Tracker'
import {useInitResponsiveProvideMixin, useSetResponsiveProvide} from '@/mixins/ResponsiveProvideMixin'

export default {
  mixins: [useInitResponsiveProvideMixin('tracker')],
  data() {
    return {
      name: '999'
    }
  },
  methods: {
    getTrackData() {
      return {
        name: this.name
      }
    }
  },
  async mounted() {
    this.tracker = new Tracker('track_example', {
      customParams: {
        pageName: '存量页面'
      },
      customFnMap: {
        getProductInfo: () => {
          return {
            productName: this.name
          }
        }
      }
    })
    useSetResponsiveProvide(this, 'tracker', this.tracker)
  }
}
</script>

<style lang="less">
.page {
  padding-bottom: 100vh;
}
.button {
  // display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  transition: 0.1s;
  -webkit-user-select: none;
  user-select: none;
  vertical-align: middle;
  -webkit-appearance: none;
  border: 1px solid #999;
  padding: 10rpx 20rpx;
}

.block {
  padding: 20rpx;
}

input {
  font-size: 28rpx;
}
</style>
